<template>
  <div class="screen_connect">
    <div class="table_list">
      <div class="table_all">
        <div class="table_title light_blue">{{ tableTitle }}</div>
        <div class="course_table">
          <el-table
            height="730"
            :data="tableData"
            :span-method="objectSpanMethod"
          >
            <el-table-column
              show-overflow-tooltip
              v-for="(td, tdindex) in tableHeader"
              :key="tdindex"
              :width="td.width"
              align="center"
              :label="td.name"
              :prop="td.key"
              :sortable="td.sortable"
            >
              <template slot-scope="scope">
                <!-- 含后缀 -->
                <span v-if="td.percentage">{{
                  (scope.row[td.key] ? scope.row[td.key] : 0) + "%"
                }}</span>
                <!-- 含评价 -->
                <span v-else-if="td.appraise">
                  <el-rate
                    :value="scope.row[td.key] ? scope.row[td.key] : 0"
                    disabled
                    text-color="#ff9900"
                  >
                  </el-rate>
                </span>
                <!-- 序号 -->
                <span v-else-if="td.index">
                  {{ scope.$index + 1 }}
                </span>
                <!-- 混合 -->
                <span v-else-if="td.mix">
                  {{ scope.row[td.mix[0]] ? scope.row[td.mix[0]] : 0 }}/{{
                    scope.row[td.mix[1]] ? scope.row[td.mix[1]] : 0
                  }}
                </span>
                <!-- 混合 -->
                <span v-else-if="td.classmix">
                  {{
                    scope.row[td.classmix[0]] ? scope.row[td.classmix[0]] : 0
                  }}({{
                    scope.row[td.classmix[1]] ? scope.row[td.classmix[1]] : 0
                  }})
                </span>
                <!-- 其余 -->
                <span v-else>{{
                  scope.row[td.key] ? scope.row[td.key] : 0
                }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "",
  props: {
    tableData: Array,
    tableHeader: Array,
    tableTitle: String,
    btns_type: [String, Number],
  },
  watch: {
    tableData(e) {
      if (this.btns_type == 7) {
        this.getRowSpan();
      }
    },
  },
  data() {
    return {
      position: 0,
      rowSpanArr: [],
    };
  },
  mounted() {},
  methods: {
    getRowSpan() {
      this.rowSpanArr = [];
      this.tableData.forEach((item, index) => {
        if (index == 0) {
          this.rowSpanArr.push(1);
          this.position = 0;
        } else {
          if (
            this.tableData[index].major_name ==
              this.tableData[index - 1].major_name &&
            this.tableData[index].name == this.tableData[index - 1].name
          ) {
            this.rowSpanArr[this.position] += 1; //项目名称相同，合并到同一个数组中
            this.rowSpanArr.push(0);
          } else {
            this.rowSpanArr.push(1);
            this.position = index;
          }
        }
      });
      console.log(this.rowSpanArr);
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (this.btns_type == 7) {
        if (columnIndex == 2 || columnIndex == 1) {
          if (this.rowSpanArr[rowIndex] > 0) {
            return {
              rowspan: this.rowSpanArr[rowIndex],
              colspan: 1,
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0,
            };
          }
        }
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.screen_connect {
  width: 100%;
  display: flex;
  padding: 10px;
  box-sizing: border-box;
  margin-top: 10px;
  &_left {
    width: 494px;
    margin: 0 32px 0 53px;
    .data_statistics_module {
      width: 100%;
      margin-bottom: 20px;
      padding-bottom: 20px;
      box-sizing: border-box;
      background: rgba(0, 86, 150, 0.15);
      .module_mid {
        display: flex;
        justify-content: space-between;
        padding: 15px 38px;
        box-sizing: border-box;
        &_left {
          display: flex;
          align-items: center;
          &_value {
            margin-left: 15px;
            display: flex;
            flex-direction: column;
            .count_to {
              font-size: 31px;
              color: #21fffc;
              font-weight: bold;
              font-family: D-DIN-PRO;
            }
            &_text {
              font-size: 16px;
              color: white;
              font-family: Alibaba PuHuiTi;
            }
          }
        }
      }
      .module_bottom {
        height: 120px;
        display: flex;
        justify-content: space-between;
        align-content: space-between;
        flex-wrap: wrap;
        padding: 0 38px;
        box-sizing: border-box;
        margin-top: 16px;
        &_item {
          display: flex;
          align-items: center;
          &_img {
            width: 40px;
            height: 40px;
          }
          &_value {
            margin-left: 15px;
            display: flex;
            flex-direction: column;
            align-items: center;
            .count_to {
              width: 60px;
              text-align: center;
              font-size: 20px;
              color: #ffffff;
              font-weight: bold;
              font-family: D-DIN-PRO;
            }
            span {
              font-size: 20px;
              color: #ffffff;
              font-weight: bold;
              font-family: D-DIN-PRO;
            }
            &_text {
              font-size: 16px;
              color: white;
              font-family: Alibaba PuHuiTi;
            }
          }
        }
      }
    }
    .login_detial {
      width: 100%;
      margin-bottom: 20px;
      background: rgba(0, 86, 150, 0.15);
      &_chart {
        width: 100%;
        height: 234px;
      }
    }
    .courseware_storage {
      width: 100%;
      margin-bottom: 20px;
      background: rgba(0, 86, 150, 0.15);
      .courseware_chart {
        width: 100%;
        height: 220px;
      }
    }
    .rebuild_stu_info {
      width: 100%;
      margin-bottom: 20px;
      background: rgba(0, 86, 150, 0.15);

      .select_btns {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        color: white;
        padding: 0 0 10px;
        box-sizing: border-box;
        position: absolute;
        left: 380px;
        margin-top: 10px;
        .btn_text {
          user-select: none;
          cursor: pointer;
          width: 80px;
          height: 30px;
          background: rgba(255, 255, 255, 0.1);
          text-align: center;
          line-height: 30px;
          border: 1px solid rgba(255, 255, 255, 0.1);
        }
      }
    }
  }
  &_mid {
    width: 760px;
    .school_name {
      margin-bottom: 50px;
      width: 100%;
      display: flex;
      justify-content: center;
      color: #21fffc;
      font-size: 31px;
      font-family: YouSheBiaoTiHei;
    }
    .average_course_progress {
      width: 100%;
      margin-bottom: 20px;
      background: rgba(0, 86, 150, 0.15);
    }
  }
  &_right {
    width: 494px;
    margin-left: 37px;
    .learning_warning {
      width: 100%;
      margin-bottom: 20px;
      background: rgba(0, 86, 150, 0.15);
    }
    .rebuild_stu_info {
      width: 100%;
      margin-bottom: 20px;
      background: rgba(0, 86, 150, 0.15);
    }
    .resource_usage_school {
      width: 100%;
      margin-bottom: 20px;
      background: rgba(0, 86, 150, 0.15);
    }
    .top_student {
      width: 100%;
      margin-bottom: 20px;
      background: rgba(0, 86, 150, 0.15);
    }
  }
  .table_list {
    width: 100%;
    padding: 50px 57px 0;
    box-sizing: border-box;
    .table_all {
      display: flex;
      width: 100%;
      flex-direction: column;
      align-items: center;
      padding: 30px 44px 20px;
      box-sizing: border-box;
      height: 831px;
      background: rgba(0, 86, 150, 0.4);
      border: 2px solid #099ce8;
      .table_title {
        width: 100%;
        font-size: 30px;
        font-family: YouSheBiaoTiHei;
        font-weight: 400;
        color: #ffffff;
      }
      .course_table {
        width: 100%;
        height: 730px;
      }
    }
  }
}
</style>
